<button
  class="mx-auto flex w-fit gap-3 rounded-lg border bg-t3-purple-200/50 p-2 hover:bg-t3-purple-200/75 dark:border-t3-purple-200/20 dark:bg-t3-purple-200/10 dark:hover:border-t3-purple-200/50"
  name="theme-toggle"
>
  <label class="cursor-pointer text-t3-purple-500 dark:text-slate-50">
    <!-- Sun -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-6 w-6 fill-current stroke-current stroke-2 transition-colors duration-300"
      viewBox="0 0 24 24"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
      ></path>
    </svg>
  </label>
  <label class="cursor-pointer text-slate-900 dark:text-t3-purple-500">
    <!-- Moon -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-6 w-6 fill-current stroke-current transition-colors duration-300"
      viewBox="0 0 20 20"
    >
      <path
        d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
      ></path>
    </svg>
  </label>
</button>

<script>
  const html = document.documentElement;

  const themeToggle = document.querySelector('[name="theme-toggle"]');

  const getMessage = () => {
    const theme = html.classList.contains("dark") ? "light" : "dark";
    return `Use ${theme}-mode`;
  };

  themeToggle!.setAttribute("title", getMessage());
  themeToggle!.setAttribute("aria-label", getMessage());
  themeToggle!.setAttribute(
    "value",
    html.classList.contains("dark") ? "dark" : "light",
  );

  const toggleTheme = (t: "light" | "dark") => {
    localStorage.setItem("theme", t);
    html.classList.add(t === "dark" ? "dark" : "light");
    html.classList.remove(t === "dark" ? "light" : "dark");
    themeToggle!.setAttribute("title", getMessage());
    themeToggle!.setAttribute("aria-label", getMessage());
    themeToggle!.setAttribute("value", t);
  };

  themeToggle!.addEventListener("click", () => {
    toggleTheme(html.classList.contains("dark") ? "light" : "dark");
  });
</script>
